<template>
  <div class="login">
    <div class="login-wrap">
      <div class="logo tc">
        <Logo fill="#fff" width="218px" />
      </div>
      <!-- <div class="contents">
        <div class="title">
          {{ $route.name === "login" ? "登录" : "注册" }}
        </div>
        <c-form
          v-model="form"
          ref="form"
          :data="formData"
          :rules="rules"
          :showLabel="false"
          @validate="validate"
          @pressEnter="pressEnter"
        >
          <template v-slot:captchaCode="{ change }">
            <a-input-group compact>
              <a-input
                v-model="form.captchaCode"
                ref="userNameInput"
                style="width: 65%"
                placeholder="请输入图形验证码"
                @change="change('captchaCode')"
              >
                <c-icon type="tupian" slot="prefix" size="14" />
              </a-input>
              <img
                :src="graphicUrl"
                style="width: 35%"
                class="cursor-pointer graphicCode"
                @click="getCaptchaCode"
                alt=""
                v-if="graphicUrl"
              />
              <c-button
                type="primary"
                width="35%"
                @click="getCaptchaCode"
                v-else
                >获取验证码</c-button
              >
            </a-input-group>
          </template>
          <template v-slot:registerCode="{ change }">
            <a-input-group compact>
              <a-input
                v-model="form.registerCode"
                style="width: 65%"
                @change="change('registerCode')"
                placeholder="请输入验证码"
              >
                <template v-slot:prefix>
                  <c-icon type="xiaoxi" size="14" />
                </template>
              </a-input>
              <c-button
                type="primary"
                width="35%"
                :loading="getRegisterCodeLoading"
                :disabled="getRegisterCodeDisabled"
                @click="getRegisterCode"
                >{{ getRegisterCodeText }}</c-button
              >
            </a-input-group>
          </template>
        </c-form>
        <div class="footer">
          <div class="top flex">
            <div class="resetPassword" v-if="$route.name === 'login'">
              <i class="cursor-pointer primary" @click="resetPassword"
                >忘记密码</i
              >
            </div>
            <div class="agreement" v-else>
              <a-checkbox v-model="checkedAgreement"></a-checkbox>
              我已阅读并同意
              <i class="cursor-pointer primary" @click="agreement"
                >《用户协议》</i
              >
            </div>
          </div>
          <div class="bottom">
            <div class="submit">
              <a-space
                class="submit-space flex"
                direction="vertical"
                size="middle"
              >
                <c-button
                  type="primary"
                  class="submit-btn"
                  block
                  :loading="submitLoading"
                  @click="submit"
                  :disabled="$route.name === 'register' && !checkedAgreement"
                  >{{ $route.name === "login" ? "登录" : "立即注册" }}</c-button
                >
                <c-button block class="back submit-btn" @click="toHome"
                  >返回首页</c-button
                >
              </a-space>
            </div>
            <div class="toRegister tc" v-if="$route.name === 'login'">
              还没有账号？
              <router-link :to="{ name: 'register' }" class="primary"
                >免费注册</router-link
              >
            </div>
            <div class="toLogin tc" v-else>
              已有账号，
              <router-link :to="{ name: 'login' }" class="primary"
                >前往登录</router-link
              >
            </div>
          </div>
        </div>
      </div> -->
      <Contents />
    </div>
    <!-- <c-modal
      v-model="resetVisible"
      title="重置密码"
      @cancel="resetPasswordClose"
      noFooter
      destroyOnClose
      compact
    >
      <ResetPassword ref="resetPassword" @resetFinish="resetPasswordFinish" />
    </c-modal> -->
    <!-- <c-modal
      v-model="agreementVisible"
      width="700px"
      :closeable="false"
      title="用户协议"
    >
      <a-spin :spinning="loginAgreementLoading">
        <iframe
          ref="loginAgreement"
          :src="
            'https://h5.manytrader.net/userAgreement?time=' +
              new Date().getTime()
          "
          width="100%"
          height="500px"
          frameborder="0"
        ></iframe>
      </a-spin>
      <template v-slot:footer>
        <c-button type="primary" @click="agreementVisible = false"
          >确定</c-button
        >
      </template>
    </c-modal> -->
    <!-- <c-modal
      v-model="loginVisible"
      title="登录认证"
      noFooter
      centered
      destroyOnClose
      compact
      @cancel="loginVerifyClose"
    >
      <c-form
        v-model="loginVerifyForm"
        ref="loginVerify"
        :data="loginVerifyFormData"
        :rules="loginVerifyRules"
        :showLabel="false"
        @submit="loginVerify"
      >
        <template v-slot:captchaCode="{ change }">
          <a-input-group compact>
            <a-input
              v-model="loginVerifyForm.captchaCode"
              ref="userNameInput"
              style="width: 65%"
              placeholder="请输入图形验证码"
              @change="change('captchaCode')"
            >
              <c-icon type="tupian" slot="prefix" size="14" />
            </a-input>
            <img
              :src="graphicUrl"
              style="width: 35%"
              class="cursor-pointer graphicCode"
              @click="getCaptchaCode"
              alt=""
              v-if="graphicUrl"
            />
            <c-button type="primary" width="35%" @click="getCaptchaCode" v-else
              >获取验证码</c-button
            >
          </a-input-group>
        </template>
        <template v-slot:registerCode="{ change }">
          <a-input-group compact>
            <a-input
              v-model="loginVerifyForm.registerCode"
              style="width: 65%"
              @change="change('registerCode')"
              placeholder="请输入验证码"
            >
              <template v-slot:prefix>
                <c-icon type="xiaoxi" size="14" />
              </template>
            </a-input>
            <c-button
              type="primary"
              width="35%"
              :loading="getRegisterCodeLoading"
              :disabled="getRegisterCodeDisabled"
              @click="getRegisterCode"
              >{{ getRegisterCodeText }}</c-button
            >
          </a-input-group>
        </template>
      </c-form>
    </c-modal> -->
  </div>
</template>

<script>
import { mapActions } from "vuex";
// import {
//   sendRegisterCode,
//   sendLoginVericode,
//   registerCaptcha,
//   loginCaptcha
// } from "@/api/login/index.js";
// import ResetPassword from "@/views/reset-password";
import Logo from "@/components/logo";
import Contents from "./components/contents";

// const formLogin = [
//   {
//     label: "手机号",
//     prop: "phone",
//     prefix: "phone"
//   },
//   {
//     label: "密码",
//     prop: "password",
//     type: "password",
//     prefix: "mima1"
//   }
// ];
// const loginVerifyFormData = [
//   {
//     label: "手机号",
//     prop: "phone",
//     prefix: "phone",
//     disabled: true
//   },
//   {
//     label: "图形验证码",
//     prop: "captchaCode",
//     slot: "captchaCode"
//   },
//   {
//     label: "验证码",
//     prop: "registerCode",
//     slot: "registerCode"
//   },
//   {
//     label: " ",
//     prop: "submit",
//     type: "submit",
//     submitText: "认证"
//   }
// ];
// const formRegister = [
//   {
//     label: "手机号",
//     prop: "phone",
//     prefix: "phone"
//   },
//   {
//     label: "图形验证码",
//     prop: "captchaCode",
//     slot: "captchaCode"
//   },
//   {
//     label: "验证码",
//     prop: "registerCode",
//     slot: "registerCode"
//   },
//   {
//     label: "密码",
//     prop: "password",
//     inputType: "password",
//     prefix: "mima1"
//   },
//   {
//     label: "推荐人",
//     prop: "introducer",
//     prefix: "tubiao302"
//   }
// ];

export default {
  components: {
    // ResetPassword,
    Logo,
    Contents
  },
  // data() {
  //   return {
  //     form: {
  //       phone: "",
  //       captchaCode: "",
  //       registerCode: "",
  //       password: "",
  //       introducer: ""
  //     },
  //     loginVerifyForm: {
  //       phone: "",
  //       captchaCode: "",
  //       registerCode: ""
  //     },
  //     loginVisible: false,
  //     resetVisible: false,
  //     getRegisterCodeText: "获取验证码",
  //     getRegisterCodeLoading: false,
  //     getRegisterCodeDisabled: true,

  //     checkedAgreement: true,
  //     rules: {
  //       phone: [
  //         { required: true, validator: this.$vd.phone, trigger: "change" }
  //       ],
  //       captchaCode: [
  //         { required: true, message: "请输入图形验证码", trigger: "change" }
  //       ],
  //       registerCode: [
  //         { required: true, message: "请输入验证码", trigger: "change" }
  //       ],
  //       password: [
  //         { required: true, validator: this.$vd.passWord, trigger: "change" }
  //       ]
  //     },
  //     loginVerifyRules: {
  //       captchaCode: [
  //         { required: true, message: "请输入图形验证码", trigger: "change" }
  //       ],
  //       registerCode: [
  //         { required: true, message: "请输入验证码", trigger: "change" }
  //       ]
  //     },
  //     graphicUrl: null,
  //     // phoneVerify: false,
  //     loginId: null,
  //     timer: null,
  //     loginVerifyFormData: loginVerifyFormData,
  //     submitLoading: false,
  // agreementVisible: false,
  // loginAgreementLoading: false
  //   };
  // },
  // watch: {
  //   $route(to) {
  //     if (to.name === "register") {
  //       this.agreementVisible = true;
  //       this.getCaptchaCode();
  //     }
  //     this.$refs.form.resetFields();
  //     // 重置倒计时
  //     this.timer = null;
  //     this.getRegisterCodeText = "获取验证码";
  //     this.getRegisterCodeDisabled = false;
  //   }
  // },
  // computed: {
  //   formData() {
  //     let formData;
  //     if (this.$route.name === "login") {
  //       // if (this.phoneVerify) {
  //       //   let f = [...formLogin];
  //       //   f.splice(1, 0, formRegister[1], formRegister[2]);
  //       //   formData = f;
  //       // } else {
  //       formData = formLogin;
  //       // }
  //     } else {
  //       formData = formRegister;
  //     }
  //     return formData;
  //   }
  // },
  methods: {
    ...mapActions(["closeLoginWs"])
    // ...mapActions(["login", "verifyLogin", "register"]),
    //   // 密码框回车
    //   pressEnter() {
    //     this.submit();
    //   },
    //   resetPassword() {
    //     this.resetVisible = true;
    //   },
    //   agreement() {
    //     this.agreementVisible = true;
    //   },
    //   toHome() {
    //     this.$router.push({ name: "home" });
    //   },
    //   // 触发表单校验的回调事件
    //   validate(data) {
    //     if (data.prop === "phone") {
    //       if (data.status && this.getRegisterCodeText === "获取验证码") {
    //         this.getRegisterCodeDisabled = false;
    //       } else {
    //         this.getRegisterCodeDisabled = true;
    //       }
    //     }
    //   },
    //   // 获取图片验证码
    //   getCaptchaCode() {
    //     if (this.$route.name === "login") {
    //       loginCaptcha().then(res => {
    //         this.graphicUrl = URL.createObjectURL(res);
    //       });
    //     } else {
    //       registerCaptcha().then(res => {
    //         this.graphicUrl = URL.createObjectURL(res);
    //       });
    //     }
    //   },
    //   // 发送短信验证码
    //   getRegisterCode() {
    //     this.getRegisterCodeLoading = true;
    //     // if (this.phoneVerify) {
    //     if (this.$route.name === "login") {
    //       let params = {
    //         captchaCode: this.loginVerifyForm.captchaCode,
    //         loginId: this.loginId
    //       };
    //       sendLoginVericode(params)
    //         .then(() => {
    //           this.countdown();
    //           this.$message.success("短信发送成功");
    //           this.getRegisterCodeDisabled = true;
    //         })
    //         .catch(() => {
    //           this.getCaptchaCode();
    //         })
    //         .finally(() => {
    //           this.getRegisterCodeLoading = false;
    //         });
    //     } else {
    //       let params = {
    //         captchaCode: this.form.captchaCode,
    //         phone: this.form.phone
    //       };
    //       sendRegisterCode(params)
    //         .then(() => {
    //           this.countdown();
    //           this.$message.success("短信发送成功");
    //           this.getRegisterCodeDisabled = true;
    //         })
    //         .catch(() => {
    //           this.getCaptchaCode();
    //         })
    //         .finally(() => {
    //           this.getRegisterCodeLoading = false;
    //         });
    //     }
    //   },
    //   // 发送短信倒计时
    //   countdown() {
    //     let sec = 120;
    //     this.timer = setInterval(() => {
    //       if (sec <= 0) {
    //         this.getRegisterCodeText = "获取验证码";
    //         this.getRegisterCodeDisabled = false;
    //         clearInterval(this.timer);
    //       } else {
    //         this.getRegisterCodeText = `重发(${sec--}s)`;
    //       }
    //     }, 1000);
    //   },
    //   submit() {
    //     this.$refs.form
    //       .validated()
    //       .then(() => {
    //         this.submitLoading = true;
    //         if (this.$route.name === "login") {
    //           // if (this.phoneVerify) {
    //           //   this.verifyLogin({
    //           //     verifyCode: this.form.registerCode,
    //           //     loginId: this.loginId,
    //           //     terminalFlag: "PCCHROME"
    //           //   }).then(() => {
    //           //     this.$router.push({ name: "home" });
    //           //   });
    //           // } else {
    //           this.login({
    //             phone: this.form.phone,
    //             password: this.form.password,
    //             terminalFlag: 4
    //           })
    //             .then(() => {
    //               console.log("login");
    //               this.$router.push({ name: "home" });
    //             })
    //             .catch(err => {
    //               // 需要进行登录认证
    //               if (err.code === this.$globalSite.errorCode.verifyByPhone) {
    //                 this.loginId = err.data.loginId;
    //                 // this.phoneVerify = true;
    //                 this.loginVisible = true;
    //                 this.loginVerifyForm.phone = this.form.phone;
    //                 this.getCaptchaCode();
    //               }
    //             })
    //             .finally(() => {
    //               this.submitLoading = false;
    //             });
    //           // }
    //         } else {
    //           this.register(this.form)
    //             .then(() => {
    //               this.$router.push({ name: "home" });
    //             })
    //             .finally(() => {
    //               this.submitLoading = false;
    //             });
    //         }
    //       })
    //       .catch(() => {});
    //   },
    //   // 登录认证
    //   loginVerify() {
    //     this.$refs.loginVerify.validated().then(() => {
    //       this.submitLoading = true;
    //       this.verifyLogin({
    //         verifyCode: this.loginVerifyForm.registerCode,
    //         loginId: this.loginId,
    //         terminalFlag: 4
    //       })
    //         .then(() => {
    //           this.$router.push({ name: "home" });
    //         })
    //         .finally(() => {
    //           this.submitLoading = false;
    //         });
    //     });
    //   },
    //   // 完成重置密码
    //   resetPasswordFinish() {
    //     this.resetVisible = false;
    //   },
    //   loginVerifyClose() {
    //     // 清除定时器
    //     clearInterval(this.timer);
    //     this.timer = null;
    //     this.getRegisterCodeText = "获取验证码";
    //     this.getRegisterCodeDisabled = false;
    //     this.loginVerifyForm.captchaCode = null;
    //     this.loginVerifyForm.registerCode = null;
    //   },
    //   resetPasswordClose() {
    //     this.$refs.resetPassword.clearCountdown();
    //   },
    //   // 给iframe添加加载状态
    //   setLoginAgreementLoading() {
    //     this.loginAgreementLoading = true;
    //     let iframe = this.$refs.loginAgreement;
    //     const _this = this;
    //     if (iframe.attachEvent) {
    //       // IE
    //       iframe.attachEvent("onload", () => {
    //         _this.loginAgreementLoading = false;
    //       });
    //     } else {
    //       // 非IE
    //       iframe.onload = function() {
    //         _this.loginAgreementLoading = false;
    //       };
    //     }
    //   }
  },
  created() {
    this.closeLoginWs();
    //   if (this.$route.name === "register") {
    //     this.agreementVisible = true;
    //     this.$nextTick(() => {
    //       this.setLoginAgreementLoading();
    //     });
    //   }
  }
  // mounted() {
  //   this.getCaptchaCode();
  // }
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  background-image: url("/img/login_bg.jpg");
  background-size: cover;
  position: relative;
  .login-wrap {
    width: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .logo {
      padding-bottom: 10px;
    }
  }
}
</style>
